<template>
	<component :is="renderComponent" />
</template>

<script lang="ts" setup>
import { computed } from "vue";

import Index from "@/components/mp3/index.vue";
import Album from "@/components/mp3/album.vue";
import Title from "@/components/mp3/title.vue";
import Artist from "@/components/mp3/artist.vue";
import { useMP3RouteData } from "@/utils/useMP3";

const { priorIndex } = useMP3RouteData();
const renderComponent = computed(() => {
	if (priorIndex.value === 0) {
		return Index;
	} else if (priorIndex.value === 1) {
		return Title;
	} else if (priorIndex.value === 2) {
		return Artist;
	} else {
		return Album;
	}
});
</script>
